<template>
	<view class="details">
		<view class="box">
			<view class="title">
				账本名称
			</view>
			<view class="name">
				{{dataForm.acc.name}}
			</view>
		</view>
		<view class="people">
			<view class="title">
				所有成员
			</view>
			<view class="main">
				<view class="main_box" v-for="item in dataForm.userlist" :key="item._id" @click="tomain(item)">
					<view class="left">
						<image :src="item.avatarUrl" mode=""></image>
						<view class="text">
							<view class="name">
								{{item.nickName}}
							</view>
							<view class="money">
								累计消费：{{item.totalMoney}}
							</view>
						</view>
					</view>
					<view class="right">
						<span
							:style="item.pay>0?'color:#008c8c':'color:#EE3232'">{{item.pay>0?"应收":"应出"}}-</span>{{Math.abs(item.pay) }}
					</view>
				</view>
			</view>
		</view>
		<button class="primary" :plain='true' open-type="share">添加朋友</button>
		<!-- <view @click="submit" class="submit">删除账本</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				dataForm: {
					acc: {
						name: ''
					},
					userlist: []
				}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.init()
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(res) {
			let that = this
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res)
			}
			return {
				title: '晨曦曦小算盘', //分享的名称
				// path: '/pages/index/index?id=123456',
				path: '/pages/index/index?id=' + that.id + '&name=' + that.dataForm.acc.name + '&nickName=' + uni
					.getStorageSync('userInfo').nickName,
				mpId: 'wxb4f527bd11796c0e' //此处配置微信小程序的AppId
			}
		},
		methods: {
			tomain(e) {
				console.log(e);
				uni.navigateTo({
					url: `./mainAccount/mainAccount?founderId=${e._id}`
				})
			},
			init() {
				let data = {
					id: this.id
				}
				this.$cloudApi.call({
					name: 'getAccDetail',
					data,
					success: res => {
						this.dataForm = res
						let totalMoney = 0
						this.dataForm.userlist.forEach((item) => {
							totalMoney += Number(item.totalMoney)
						})
						this.dataForm.userlist.forEach((item) => {
							item.pay = (Number(item.totalMoney) - totalMoney / this.dataForm.userlist
								.length).toFixed(2)
						})
						console.log(this.dataForm);

					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.details {
		.submit {
			background: #007AFF;
			color: #fff;
			text-align: center;
			border-radius: 40rpx;
			padding: 20rpx;
			width: 94%;
			box-sizing: border-box;
			// margin-top: 140rpx;
			position: fixed;
			bottom: 50rpx;
			left: 22rpx;
		}

		.primary {
			background: #007AFF;
			color: #fff;
			text-align: center;
			border-radius: 40rpx;
			// padding: 20rpx;
			width: 94%;
			height: 43px;
			box-sizing: border-box;
			// margin-top: 140rpx;
			position: fixed;
			bottom: 50rpx;
			left: 22rpx;
			border: none;
		}

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.box {
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 17rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #f1f1f1;
		}

		.people {
			background: #fff;
			font-size: 30rpx;

			.title {
				padding: 17rpx;
				border-bottom: 1px solid #f1f1f1;
			}

			.main {

				.main_box {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #f1f1f1;
					padding: 17rpx;
					box-sizing: border-box;

					.right {
						// color: red;
					}

					.left {
						display: flex;
						align-items: center;

						.text {
							margin-left: 10rpx;

							.money {
								margin-top: 10rpx;
								color: #999;
								font-size: 28rpx
							}
						}
					}
				}

			}
		}
	}
</style>
